<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="pages/admin/commons/header :: header"></div>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
<body>
<div class="wap-container">
    <nav class="breadcrumb" style="background-color:#fff;padding: 0 24px">
        首页
        <span class="c-gray en">/</span>
        代码维护
        <span class="c-gray en">/</span>
        行政代码查询
        <a class="btn btn-success radius f-r" href="javascript:location.replace(location.href);"
           style="line-height:1.6em;margin-top:3px" title="刷新"><i class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <article class="Hui-admin-content clearfix">
        <div class="wap-container">
            <div class="panel">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>行政代码查询</legend>
                </fieldset>
                <div style="width: 90%;margin: 0 0 2% 15%"
                     class="form-controls col-xs-8 col-sm-9">
                        <span class="select-box" style="width: 25%">
							<select id="sel1" class="select" name="category">
							</select>
                        </span>
                    <span class="select-box" style="width: 25%">
							<select id="sel2" class="select" name="category">
							</select>
                        </span>
                    <span class="select-box" style="width: 25%">
							<select id="sel3" class="select" name="category">
							</select>
                        </span>
                </div>

                <div style="display: inline-block; width: 90%; height: 410px; padding: 10px; border: 1px solid #ddd; overflow: auto;margin-left: 5%">

                    <table style="float: right;" class="layui-table">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th width="10%">代码</th>
                            <th width="8%">编码</th>
                            <th>名称</th>
                            <th>城乡</th>
                            <th>类别</th>
                            <th>地区全名</th>
                            <th width="6%">停用</th>
                        </tr>
                        </thead>
                        <tbody id="nodeInfo">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--				<td class="va-t"><iframe ID="testIframe" Name="testIframe" FRAMEBORDER=0 SCROLLING=AUTO width=100%  height=390px SRC="product-category-add.html"></iframe></td>-->
    </article>
</div>
<!--_footer 作为公共模版分离出去-->
<div th:replace="pages/admin/commons/footer :: footer"></div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript">

    $(function () {


        $.ajax({
            url: "/childhealth/xzCodeMaintain/getNodeInfo/0",
            method: "post",
            success: function (result) {
                $.each(result.data, function (index, item) {
                    if (item.id != 1) {
                        var opt = $("<option value='" + item.id + "'></option>").append(item.information);
                        $("#sel1").append(opt);
                    }
                })
            }
        });

        $("#sel1").change(function () {
            $.ajax({
                url: "/childhealth/xzCodeMaintain/getNodeInfo/" + $(this).val(),
                method: "post",
                success: function (result) {
                    // console.log(result);
                    $("#sel2").empty();
                    $("#sel3").empty();
                    $.each(result.data, function (index, item) {
                        var opt = $("<option value='" + item.id + "'></option>").append(item.information);
                        $("#sel2").append(opt);
                    })
                }
            });

            // fullTable($('#sel1 option:selected').text());
            fullTable($('#sel1 option:selected').text() + $('#sel2 option:selected').text() + $('#sel3 option:selected').text());


        });

        $("#sel2").change(function () {
            $.ajax({
                url: "/childhealth/xzCodeMaintain/getNodeInfo/" + $(this).val(),
                method: "post",
                success: function (result) {
                    console.log(result);
                    $("#sel3").empty();
                    $.each(result.data, function (index, item) {
                        var opt = $("<option value='" + item.id + "'></option>").append(item.information);
                        $("#sel3").append(opt);
                    })
                }
            });
            fullTable($('#sel1 option:selected').text() + $('#sel2 option:selected').text());

        });

        $("#sel3").change(function () {
            fullTable($('#sel1 option:selected').text() + $('#sel2 option:selected').text() + $('#sel3 option:selected').text());
        });

        function fullTable(str) {
            $.ajax({
                url: "/childhealth/xzCodeMaintain/findAreaNameFullIn",
                method: "post",
                data: {"str": str},
                success: function (result) {
                    $('#nodeInfo').empty();
                    console.log(result);
                    if (result.data == "") {
                        $("<tr></tr>").append($("<td style='text-align:center' colspan=\"10\"></td>").append("数据为空!")).appendTo("#nodeInfo")
                    } else {
                        var node = result.data;
                        $.each(node, function (index, item) {
                            var tdXzCode = $("<td></td>").append(item.xzCode);
                            var tdCode = $("<td></td>").append(item.code);
                            var tdAreaSimple = $("<td></td>").append(item.areaSimple);
                            var tdAreaFull = $("<td></td>").append(item.areaFull);
                            var tdCxCategory = $("<td></td>").append(item.cxCategory);
                            var tdAreaNameFull = $("<td></td>").append(item.areaNameFull);
                            if (item.isOpen == 1) {
                                var tdIsOpen = $("<td class='cen x'></td>").append("<input disabled checked type='checkbox'>")
                            } else {
                                var tdIsOpen = $("<td class='cen x'></td>").append("<input disabled type='checkbox'>")
                            }

                            $("<tr></tr>").append(tdXzCode).append(tdCode).append(tdAreaSimple).append(tdAreaFull).append(tdCxCategory).append(tdAreaNameFull).append(tdIsOpen).appendTo("#nodeInfo");
                        });
                    }
                }
            })
        }

    })

</script>
</body>
</html>
